<template>

    <div style="margin-top: 22px">

        <el-radio-group v-model="radio1" style="background-color: aqua;">

            <el-radio-button label="全部测评" @click="handleRadioChange('0')"></el-radio-button>

            <el-radio-button label="已删除" @click="handleRadioChange('1')"></el-radio-button>
        </el-radio-group>

        <el-row>

            <el-col :span="24" style="margin-top: 22px">

                <el-form :inline="true" :model="formData">

                    <el-form-item label="测评名称：">

                        <el-input v-model="formData.testName" />

                    </el-form-item>

                    <el-form-item label="测评类型">

                        <el-input v-model="formData.classId" />

                    </el-form-item>

                    <el-form-item>

                        <el-button type="primary" @click="getAllTests">

                            搜索

                        </el-button>
                        <el-button @click="addTest" type="primary">

                            新增测评

                        </el-button>
                        <el-button type="danger" @click="removBatch">

                            批量删除

                        </el-button>

                    </el-form-item>

                </el-form>

            </el-col>

        </el-row>

        <el-row style="margin-bottom: 10px;">

            <el-col :span="24">
                <!-- 绑定传递数据的空表单 -->
                <el-table :data="tableData" border :header-cell-style="{ background: '#87cefa', color: '#FFF' }" stripe
                    style="width: 100%" @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column type="selection" :selectable="selectable" width="55" />
                    <!-- prop对应传递数据的变量名属性，lablel对应显示名称 -->
                    <el-table-column prop="id" label="测评ID" align="center" />
                    <el-table-column prop="testName" label="测评名称" align="center" />
                    <el-table-column prop="testIntroduction" label="测评简介" align="center" />
                    <!-- <el-table-column prop="thumbnail" label="缩略图" align="center" /> -->
                    <el-table-column prop="thumbnail" label="缩略图" align="center">
                        <template #default="scope">
                            <el-image 
                                style="width: 100px; height: 100px; text-align: center;" 
                                :src="'http://localhost:8081/sfzy' + scope.row.thumbnail" 
                                fit="contain"
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="originalPrice" label="原价" align="center" />
                    <el-table-column prop="discountedPrice" label="折扣价" align="center" />
                    <el-table-column prop="psychologicalTestCategory.classificationName" label="所属分类" align="center" />

                    <el-table-column label="操作" align="center">
                        <!-- 插槽中绑定默认插槽，允许你访问当前行的数据 -->
                        <template #default="scope">
                            <!-- scope对象包含了当前行的数据，其中scope.row就是当前行的数据对象 -->
                            <el-button size="small" type="primary" @click="editTest(scope.row)"
                                :underline="false">修改测评</el-button>
                            <el-button  v-if="scope.row.del=='0'" size="small" type="danger" @click="deleteTest(scope.row.id)"
                                :underline="false" style="margin-left: -1px;">删除测评</el-button>
                            <el-button v-else size="small" type="primary" :underline="false"
                                @click="enableTest(scope.row )">启用</el-button>
                        </template>

                    </el-table-column>

                </el-table>

            </el-col>

        </el-row>
        <!-- 弹出弹窗，填写测评信息 -->
        <el-dialog v-model="dialogVisible" :title="title" width="500">

            <el-form :model="testData">
                <el-form-item label="测评名称" label-width="80px">
                    <el-input v-model="testData.testName" autocomplete="off" placeholder="请输入测评名称"></el-input>
                </el-form-item>
                <el-form-item label="测评简介" label-width="80px">
                    <el-input v-model="testData.testIntroduction" autocomplete="off" placeholder="请输入测评简介"></el-input>
                </el-form-item>
                <el-form-item label="缩略图">
                    <!--
                        上传组件
                        action: 必选参数，上传的地址
                        list-type: 文件列表的类型
                        on-success: 文件上传成功时的回调函数
                        limit: 最大允许上传个数
                        on-preview: 点击文件列表中已上传的文件时的钩子
                        file-list: 上传的文件列表
                        on-remove: 文件列表移除文件时的钩子
                    -->
                    <el-upload action="http://localhost:8081/sfzy/upload"
                        list-type="picture-card"
                        :on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
                        :file-list="fileList" :on-remove="handleRemove">
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                    <!-- 放大预览组件: 和官网一致 -->
                    <el-dialog v-model="dialogVisibleImg">
                        <img width="100%" :src="dialogImageUrl">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="原价" label-width="80px">
                    <el-input v-model="testData.originalPrice" autocomplete="off" placeholder="请输入测评原价"></el-input>
                </el-form-item>
                <el-form-item label="折扣价" label-width="80px">
                    <el-input v-model="testData.discountedPrice" autocomplete="off" placeholder="请输入测评折扣价"></el-input>
                </el-form-item>
                <!-- <el-form-item label="所属分类" label-width="80px">
                <el-input v-model="testData.classId" autocomplete="off" placeholder="请输入测评所属分类id"></el-input>
                </el-form-item> -->
                <el-form-item label="所属分类">
                <!-- 使用的是静态值，文章分类数据应该是从数据库查询得到的 -->
                    <el-input v-model="testData.classId" clearable @clear="queryList" placeholder="请输入所属分类">
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancle">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 页码 -->
        <el-row>
            <!-- 定义了一个分页组件 -->
            <!-- 将formData.pageSize的值绑定到了MyComponent组件的page-size属性上 -->
            <!-- 当current-change事件被触发时，Vue会调用组件实例上的pageNumChange方法 -->
            <el-pagination size="small" layout="prev, pager, next" :total="total" :page-size="formData.pageSize"
                @current-change="pageNumChange" />
        </el-row>
    </div>
</template>

<script setup>
import { onMounted, ref,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
// 响应式对象，接收要查找的必要数据
import { ElMessageBox } from 'element-plus';
//接收全局对象
const CurrentInstance=getCurrentInstance()
//获取全局对象挂载的naxios赋值给$http来代替naxios
const {$http}=CurrentInstance.appContext.config.globalProperties
const dialogVisible = ref(false)

//响应式数组，用于存储从服务器获取的数据，这些数据会在表格中展示给用户
const tableData = ref([]);

const formData = ref({
    pageNum: 1,
    pageSize: 10,
    testName: '',
    classId: '',
    thumbnail: '',
    ids:[],
    del:"0",
});
//响应式对象，用于存储和管理与单个测试相关的各种参数和数据
let testData = ref({
    addOrUpdateFlag: 1,
    id: '',
    testName: "",
    testIntroduction: "",
    thumbnail: "",
    originalPrice: "",
    discountedPrice: "",
    classId:"",
    psychologicalTestCategory:{},
    del:"0",
});

const total = ref(0);

let title = ref('')
// 图片上传
const dialogVisibleImg = ref(false);
const dialogImageUrl = ref('');

// 图片上传
function handleSuccess(res, file) {
        /*
        多图片上传：
        1、如果数据库是单字段，把多个图片的名称适用,分隔，拼接成一个字符串
        1.jpg,2.jpg
        this.testData.thumbnail += res.data
        2、如果数据库定义了表，专门用来存储图片
        this.testData.thumbnail.push(res.data)
        */
        testData.value.thumbnail = res.data; // res.data就是图片上传的地址
    };
    // 处理删除图片
    function handleRemove(file, fileList) {
        testData.value.thumbnail = ''
        /*
        多图片移除：根据图片名称，从数组中移除
        */
    };
    // 处理图片预览
    function handlePictureCardPreview(file) {
        dialogImageUrl.value = file.url;
        dialogVisibleImg.value = true;
    }

// const handleSuccess = (response, uploadFile) => {
//     testData.value.thumbnail = response.data; // 假设 response.data 是上传文件的 URL
//     console.log('上传成功:', response.data);
// };

// const handleRemove = () => {
//     testData.value.thumbnail = ''; // 清空 thumbnail 字段
// };

// const handlePictureCardPreview = (file) => {
//     previewImageUrl.value = file.url;
//     dialogVisibleImg.value = true;
// };
//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
 formData.value.ids = val.map(item => item.id);
}
// 在组件挂载完成后调用 getAllTests 方法来获取测试数据列表
onMounted(() => {
    getAllTests();
});

// function handleSelectionChange(val) {
//         this.ids = val.map(item => item.id);
//     }
function addTest() {
    //修改标题为新增测评
    title.value = '新增测评'
    //显示对话框
    dialogVisible.value = true
    //状态为1时代表添加数据
    testData.value.addOrUpdateFlag = 1
}
// 从后台请求数据列表
function getAllTests() {
    $http({
        method: 'get',
        url: 'http://localhost:8081/sfzy/psychologicalTest/page', // 根据你的API路径调整
        params: formData.value
    }).then((res) => {
        if (res.data.code === 200) {
            // 更新为正确的数据路径
            tableData.value = res.data.data.list; 
            // 更新为正确的总记录数路径
            total.value = res.data.data.total; 
        } else {
            ElMessage.error('获取测评列表失败');
        }
    }).catch((error) => {
        ElMessage.error('获取测评列表失败');
    });
}

//确定添加
function confirm() {
    const method = ref(testData.value.addOrUpdateFlag == 2 ? 'put' : 'post');
    console.log('==============================method==================',method.value);
    
    const url = 'http://localhost:8081/sfzy/psychologicalTest';
    $http({
        method: method.value,
        url: url,
        data: testData.value
    }).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success(method === 'post' ? "添加成功" : "修改成功");
            testData.value = {}
        } else {
            ElMessage.error('操作失败!');
        }
        dialogVisible.value = false;
        getAllTests();
    }).catch((error) => {
        ElMessage.error('请求失败!');
        console.error('请求失败:', error);
    });
}

//取消添加
function cancle() {
    dialogVisible.value = false;
    testData.value = {}
}

function editTest(row) {
    testData.value = row
    title.value = '修改测评'//修改标题
    dialogVisible.value = true//显示对话框
    testData.value.addOrUpdateFlag = 2
}

function deleteTest(id) {
    ElMessageBox.confirm('是否确认删除选中的数据?', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        console.log('===========deleteTest============',id);

        $http({
        method: 'delete',
        url: 'http://localhost:8081/sfzy/psychologicalTest/' + id,
    }).then(res => {
            if (res.status === 200) {
                ElMessage.success('删除成功')
                getAllTests();
            } else {
                ElMessage.error('删除失败')
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: "取消删除操作"
        })
    });
}

// 批量删  
function removBatch(){
    console.log('===========removBatch============');
    
        ElMessageBox.confirm('是否确认删除选中的数据?', '删除', 
            {
            confirmButtonText: '确认', // 确认按钮
            cancelButtonText: '取消', // 取消按钮
            type: 'warning',// 警告的图标
            }
        )
        .then(() => {
          const idsArray = formData.value.ids;
          const idsStr = idsArray.join(",");
          
           // 点击确认 删除操作
           $http({
                method:'delete',
                url:`http://localhost:8081/sfzy/psychologicalTest?ids=${idsStr}`,
                data:{}
            }).then(res=>{
                if(res.status== 200){
                    ElMessage.success('删除成功')
                    // 判断当前页是否还有数据，如果没有则将页码减1
                    if (tableData.value.length === 0 && formData.value.pageNum > 1) {
                     formData.value.pageNum--;
                }
                // 清理ids参数
                formData.value.ids = [];
                    getAllTests();
                }else{
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: "取消删除操作",
            })
        })
    }
function pageNumChange(num) {
    // 更新表单数据中的页码
    formData.value.pageNum = num;
    // 调用获取所有测试的方法
    getAllTests();

}

function handleRadioChange(status) {
    // 更新表单数据中的status值
    formData.value.del = status;
    // 获取所有测试数据
    getAllTests();

}

// 恢复测评
function enableTest(row) {
    updateStatus(row.id, '0');
}

function updateStatus(id, del) {
    axios({
        method: 'put',
        url: `http://localhost:8081/sfzy/psychologicalTest`,
        data: {
            id: id,
            del: del
        }
    }).then((res) => {
        console.log('Response:', res.data);
        if (res.data.status == 200) {
            ElMessage.success("修改成功");
        } else {
            ElMessage.error('修改失败');
        }
        getAllTests();
    }).catch((error) => {
        console.error('Error:', error);
        ElMessage.error('修改测评状态失败');
    });
}
</script>

<style scoped></style>